<template>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" @title="title">
        <div class="manager_detail"
             :style="{ backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat' }">
            <i id="app" class="el-icon-location" style="font-size: 30px;"  @mousedown="moveDown" @mouseup='moveUp'></i>
        </div>


        <div slot="footer" class="dialog-footer">
            <el-row :gutter="10" >
                <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <el-form-item :label="$t('jizhanguanli.station_name')" prop="stationName" >
                            <el-input v-model="formData.stationName" />
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <el-form-item :label="$t('jizhanguanli.map_id')" prop="mapId">
                            <el-select v-model="formData.mapId" :placeholder="$t('jizhanguanli.map_id_required')" @change="chooseMap" :style="{width: '100%'}" clearable>
                                <el-option
                                        v-for="item in mapListData"
                                        :key="item.mapId"
                                        :label="item.mapName"
                                        :value="item.mapId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <el-form-item :label="$t('jizhanguanli.position_x')" prop="positionX">
                            <el-input v-model="formData.positionX" />
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <el-form-item :label="$t('jizhanguanli.position_y')" prop="positionY">
                            <el-input v-model="formData.positionY" />
                        </el-form-item>
                    </div></el-col>
                </el-form>
            </el-row>
            <MyButton class="cancel" @click="cancel">{{
                    $t("common.cancel")
                }}</MyButton>
            <MyButton class="confirm" @click="confirm">{{
                    $t("common.confirm")
                }}</MyButton>
        </div>
    </el-dialog>
</template>

<script>
    import { getImg } from "@/views/trace/service";
    import {getMapList} from "@/views/maps/service";
    import {editStation} from "@/views/station/service";
    import util from "@/utils";

    export default {
        props: {
            updateData: {
                type: Object
            }
        },
        data() {
            return {
                imageUrl: "",
                title: "",

                relativeMouseX:0,
                relativeMouseY:0,
                onmoveDown: false,
                baseImg: "",
                coverImgUrl: '',

                mapListData:[],
                formData: {
                    stationId:null,
                    stationName:null,
                    mapId:null,
                    positionX:null,
                    positionY:null,
                },
                rules: {
                    stationName: [
                        {
                            required: true,
                            message: this.$t("jizhanguanli.station_name_required"),
                            trigger: "change",
                        },
                    ],
                    mapId: [
                        {
                            required: true,
                            message: this.$t("jizhanguanli.map_id_required"),
                            trigger: "change",
                        },
                    ],
                    positionX: [
                        {
                            required: true,
                            message: this.$t("jizhanguanli.position_x_required"),
                            trigger: "change",
                        },
                    ],
                    positionY: [
                        {
                            required: true,
                            message: this.$t("jizhanguanli.position_y_required"),
                            trigger: "change",
                        },
                    ],
                },
            };
        },
        methods: {
            onOpen() {
                // 遍历 formData，并将存在的属性赋值为 data 中对应属性的值
                this.formData.stationId = this.updateData.stationId;
                this.formData.stationName = this.updateData.stationName;
                this.formData.mapId = this.updateData.mapId;
                this.formData.positionX = this.updateData.positionX;
                this.formData.positionY = this.updateData.positionY;
                this.getMapList();
            },
            cancel(){
                this.$emit('update:visible', false)
                this.$parent.getList()
                this.onClose();
            },
            confirm(){ // 提交
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const params = {
                            ...this.formData,
                        };
                        editStation(params).then(() => {
                            util.msg.success("edit_success");
                            this.$emit("refresh");
                            this.cancel();
                        });
                    }
                });
            },
            onClose() {
                this.formData = {
                    stationId:null,
                    stationName:null,
                    mapId:null,
                    positionX:null,
                    positionY:null,
                }
                this.baseImg = "";
            },
            chooseMap(){
                const data = this.mapListData.find((item) => item.mapId === this.formData.mapId);
                if(data.imgUrl){
                    getImg(data.imgUrl).then(res => {
                        if (res.code == 200) {
                            this.baseImg = "data:image/jpeg;base64," + res.data;
                        }
                    });
                }

            },
            async getMapList() {
                const res = await getMapList();
                this.mapListData = res.data;
            },
            moveDown(e){
                //    console.log(e)
                this.onmoveDown = true;
                let odiv = e.target;
                let x = e.clientX - odiv.offsetLeft;
                let y = e.clientY - odiv.offsetTop;

                if(this.onmoveDown = true){
                    document.onmousemove = (e) => {
                        event.preventDefault();
                        let left = e.clientX - x;
                        let top = e.clientY - y;
                        this.relativeMouseX = left;
                        this.relativeMouseY = top;
                        if (left <= 0) {
                            left = 0;
                        }else if(left >=960){
                            left = 960;
                        }
                        else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
                            left = document.documentElement.clientWidth - odiv.offsetWidth;
                        }
                        if (top <= 0) {
                            top = 0;
                        }else if(top >=500){
                            top = 500;
                        }
                        else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
                            top = document.documentElement.clientHeight - odiv.offsetHeight

                        }
                        odiv.style.left = left + "px";
                        odiv.style.top = top + "px"
                    }

                }
                // document.onmouseup = (e) => {
                // 	document.onmousemove = null;
                // 	document.onmouseup = null
                // }
            },
            moveUp(){

                document.onmouseup = (e) => {
                    this.onmoveDown = false
                    document.onmousemove = null;
                    document.onmouseup = null
                    this.formData.positionX = e.clientX;
                    this.formData.positionY = e.clientY;
                }

            }

        },
    };
</script>


<style scoped>
    #app {
        position: absolute;
        color: red;
        z-index: 1000;
    }
    .manager_detail{
        position: relative;
        height: 500px;
        width: 950px;
    }

</style>
